<template>
  <div class="evaluate-text">
    <textarea
      class="text"
      rows="4"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      :placeholder="placeholder"
      :maxlength="maxlength"
    ></textarea>
    <span class="tip">还可输入{{ maxlength - modelValue.length }}字</span>
  </div>
</template>

<script>
import { watch } from 'vue'
export default {
  name: 'EvaluateText',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '宝贝是否满足了你的期待？说说你的使用心得分享给其它想购买的朋友吧。'
    },
    maxlength: {
      type: Number,
      default: 500
    }
  },
  setup (props, { emit }) {
    watch(() => props.modelValue, (newVal, oldVal) => {
      if (newVal.length > props.maxlength) emit('update:modelValue', oldVal)
    }, { deep: true })
    return {}
  }
}
</script>

<style lang="less" scoped>
.evaluate-text {
  position: relative;
  .text {
    appearance: none;
    resize: none;
    border: 1px solid #e4e4e4;
    outline: none;
    padding: 10px;
    line-height: 20px;
    width: 100%;
    &::placeholder {
      color: #999;
    }
  }
  .tip {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #666;
  }
}
</style>
